import React, { Component } from 'react';
import { Button, Card, Modal } from 'antd';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftjs from 'draftjs-to-html';

export default class Rich extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRichText: false,
      editorContent: '',
      editorState: ''
    };
  }

  handleClearContent = () => {
    this.setState({
      editorState: ''
    });
  };

  handleGetText = () => {
    this.setState({
      showRichText: true
    });
  };

  onEditorChange = content => {
    this.setState({
      editorContent: content
    });
  };

  onEditorStateChange = editorState => {
    this.setState({
      editorState
    });
  };

  render() {
    const { editorContent, editorState, showRichText } = this.state;
    return (
      <div>
        <Card>
          <Button type="primary" onClick={this.handleClearContent}>
            清除内容
          </Button>
          <Button
            style={{ margintLeft: 20 }}
            type="primary"
            onClick={this.handleGetText}
          >
            获取HTML文本
          </Button>
        </Card>
        <Card title="富文本编辑器">
          <Editor
            editorState={editorState}
            onContentStateChange={this.onEditorChange}
            onEditorStateChange={this.onEditorStateChange}
          />

          <Modal
            title="富文本"
            visible={showRichText}
            onCancel={() => {
              this.setState({
                showRichText: false
              });
            }}
            footer={null}
          >
            {draftjs({ editorContent })}
          </Modal>
        </Card>
      </div>
    );
  }
}
